<template>
	<view>
		<uni-nav-bar statusBar="true" fixed="true" left-icon="back" border="none" title="QWB账户" right-text="规则"
			@clickLeft="clickLeft()" @clickRight="onClickRight()" background-color="#FE903D"
			color="#ffffff"></uni-nav-bar>

		<view class="black_1">
			<view class="left">
				<view class="text1">
					QWB<image class="img" src="/static/my/QWB.png"></image>
				</view>
				<view class="text2">
					{{qwb_u_value}}
				</view>
			</view>
			<view class="left">
				<view class="text1">
					发行总量
				</view>
				<view class="text2">
					{{count_qwb_num}}
				</view>
			</view>
		</view>

		<view class="black_2">
			<view class="left" @click="duih">兑换</view>
			<view class="left" @click="tip">充值</view>
			<view class="left" @click="tip">提币</view>
			<view class="left" @click="tip">转账</view>
		</view>

		<view class="black_4">
			1个QWB可用{{qwb.qwb_exchange_info.usdt}}USDT+{{qwb.qwb_exchange_info.gasoline}}L汽油+{{qwb.qwb_exchange_info.debris}}个汽车碎片兑换
		</view>
		<view class="black_3">
			暂无数据
		</view>
		<rule ref="rule"></rule>
		<pay2 ref="pay2" :success="getInfo"></pay2>
	</view>
</template>

<script>
	import rule from '@/components/rule/rule.vue'
	import pay2 from '@/components/pay/pay2.vue'
	export default {
		components: {
			rule,
			pay2
		},
		onLoad(opt) {

			this.qwb_u_value = opt.qwb
			this.getInfo()
		},
		data() {
			return {
				qwb_u_value: 0,
				count_qwb_num: 0,
				"qwb": {
					"qwb_u_value": "",
					"count_qwb_num": "",
					"qwb_exchange_info": {
						"usdt": "0",
						"gasoline": "00",
						"debris": "0"
					},
					"qwb_issue_rule": ""
				}
			};
		},
		methods: {
			clickLeft() {
				uni.navigateBack()
			},
			onClickRight() {
				this.$refs.rule.open('qwb_issue_rule')
			},
			tip() {
				uni.showToast({
					title: '暂未开通',
					icon: 'none'
				})
			},
			duih() {
				this.$refs.pay2.open(this.qwb)
			},
			getInfo() {
				var that = this;
				this.api.http.requests('user/info', {}, res => {
					that.qwb_u_value = that.getAccounts(res.data.accounts,'qwb')
				}, "POST")
				this.api.http.requests('common/webSetting', {}, res => {
					this.count_qwb_num = res.data.qwb.count_qwb_num
					this.qwb = res.data.qwb
					// this.qwb_u_value = res.data.qwb.qwb_u_value
					uni.setStorageSync('qwb_issue_rule', res.data.qwb.qwb_issue_rule)
				}, "POST")
			},
			getAccounts(accounts,type) {
				var amount = '0.00'
				accounts.forEach((item) => {
					if (type == item.type) {
						amount = item.amount
						return amount
					}
				})
				return amount
			},			
		}

	}
</script>

<style scoped lang="less">
	.black_1 {
		background: #FE903D;
		padding: 20px 30px 10px 30px;
		display: flex;
		justify-content: space-between;
		font-size: 30rpx;
		font-weight: 400;
		color: #FFE6D5;

		.text2 {
			font-size: 63rpx;
			font-weight: 400;
			color: #FFFFFF;
		}

		.img {
			width: 15px;
			height: 15px;
			vertical-align: middle;
			margin-left: 5px;
		}
	}

	.black_2 {
		background: #FE903D;
		padding: 10px 30px 10px 30px;
		display: flex;
		justify-content: space-between;

		.left {
			background: #FFFFFF;
			padding: 2px 15px;
			border-radius: 32rpx;
			font-size: 32rpx;
			font-weight: bold;
			color: #FE903D;

			.img {
				width: 10px;
				height: 10px;
				margin-left: 5px;

			}
		}

	}

	.black_3 {
		font-size: 28rpx;
		font-weight: 400;
		color: #BEBEBE;
		margin-top: 40px;
		text-align: center;
	}
	
	.black_4{
		background: #FE903D;
		text-align: center;
		padding: 10px;
		font-size: 21rpx;
		font-weight: 400;
		color: #FFE6D5;
	}
</style>